<template>
  <div class="myArticle">
    <el-card class="box-card" v-for="item in myArticle">
      <div class="card-header">
        <span>文章名称：{{ item.title }}</span>
        <span>点赞数量：{{ item.likes }}</span>
        <span>创建时间：{{ item.createDate }}</span>
        <div style="margin: 5px 0;display: flex;flex-direction: row">
          <el-button type="primary" @click="seeDetail(item.id)" size="small" style="width: 50%">查看详情</el-button>
          <el-button type="primary" @click="dialogFormVisible=true;postId(item.id,item.content,item.title)" size="small"
                     style="width: 50%">编辑
          </el-button>
          <el-button type="danger" size="small" style="width: 50%" @click="deleteArticle(item.id)">删除</el-button>
        </div>
      </div>
    </el-card>
  </div>
  <el-dialog v-model="dialogFormVisible" title="编辑我的文章">
    <el-form :model="editform">
      <el-form-item>
        <el-form-item label="id" :label-width="formLabelWidth">
          <el-input v-model="editform.id" autocomplete="off" disabled/>
        </el-form-item>
      </el-form-item>
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="editform.title" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="内容" :label-width="formLabelWidth">
        <el-input v-model="editform.content" autocomplete="off" type="textarea"
                  :autosize="{ minRows: 10, maxRows: 1000 }" size="large"/>
      </el-form-item>
      <el-form-item label="创建日期:" :label-width="formLabelWidth">
        <el-date-picker
            v-model="editform.createDate"
            type="date"
            placeholder="Pick a date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        disabled/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="editArticle();dialogFormVisible = false;">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router';
import {getUserlArticle, deleteArticleById, updateArticleById, getArticelDetail} from "@/apis/article";
import {ElMessage, ElMessageBox} from "element-plus";


const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const editform = ref({
  id: '', title: '', content: '', createDate: ''
})
const date = () => {
  let date = new Date();
  let year = date.getFullYear()
  let mon = date.getMonth() + 1
  let day = date.getDate()
  let now = year + "-" + mon + "-" + day
  return now
}
const day = date()
editform.value.createDate = day
const postId = (id,content,title) => {
  editform.value.id = id;
  editform.value.content = content;
  editform.value.title = title;
}
const myArticle = ref([])
const router = useRouter()
const getMyArticle = async () => {
  const res = await getUserlArticle()
  myArticle.value = res.data
}
onMounted(() => {
  getMyArticle()
})
//访问文章细节
const seeDetail = async (articleid) => {
  const res = await getArticelDetail(articleid)
  if (res.code == 200) {
    router.push({path: '/detail', query: {articleid: articleid}})
  } else {
    ElMessage({type: 'warn', message: '你所访问的文章已经被删除'})
  }
}
//编辑文章
const editArticle = async () => {
  const {id, title, content, createDate} = editform.value
  const res = await updateArticleById({id, title, content, createDate})
  if (res.code == 200) {
    ElMessage({type: 'success', message: res.message})
    setTimeout(() => {
      location.reload()
    },800)
  } else if (res.code == 504) {
    ElMessage({type: 'error', message: res.message})
  } else {
    ElMessage({type: 'error', message: res.message})
  }
}
//删除文章
const deleteArticle = (articleId) => {
  ElMessageBox.confirm(
      '你确定删除该信息吗?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        await deleteArticleById(articleId).then(res => {
          console.log(res)
          if (res.code == 200) {
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
            getMyArticle()
          } else {
            ElMessage({
              type: 'error',
              message: '删除失败',
            })
          }
        })
      }).catch(() => {
    ElMessage({type: 'info', message: '操作取消'})
  })

}
</script>
<style scoped>
.card-header {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: left;
}

.box-card {
  width: 30%;
  height: 180px;
  margin: 50px;

}

.myArticle {
  margin-left: 200px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

span {
  margin: 3px;
}
</style>